import React, { useState, useRef, useEffect } from 'react';
import { Button, Popover } from 'antd';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
const Table = (props) => {
  const { list } = props;
  const getColumns = [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
    },
    {
      title: '封面',
      dataIndex: 'cover',
      render: (val) => {
        return <PopImgShow width={24} url={val}></PopImgShow>;
      },
    },
    {
      title: '规格',
      dataIndex: 'skuFlag',
      render: (val, record) => {
        return val === '1' ? (
          record.id === id && goodsType === 'offline' ? (
            '--'
          ) : (
            <Popover
              trigger="click"
              onOpenChange={setOpenPopover}
              content={<Copponents record={record}></Copponents>}
              open={openPopover[record.id]}
            >
              <Button
                type="link"
                onClick={() =>
                  setOpenPopover({
                    [record.id]: true,
                  })
                }
              >
                选择规格{' '}
              </Button>
            </Popover>
          )
        ) : (
          '--'
        );
      },
    },
    {
      title: '库存',
      dataIndex: 'stock',
    },
  ];
  return (
    <>
      <TableDataBlock
        columns={getColumns}
        rowKey={(record) => `${record.id}`}
        list={list}
      ></TableDataBlock>
    </>
  );
};

export default Table;
